<template>
  <div v-loading="loading">
    <TableSearch
      ref="tableSearch"
      :tableBtns="tableBtns"
      :search-path="searchPath"
      :formItemsInline="formItemsInline"
      :columns="columns"
      :tableData="tableData"
      :form="form"
      @handleTableData="handleTableData"
      @reset="reset"
    >
      <template slot="date">
        <el-form-item>
          <SearchDatePicker
            :start.sync="form.startTime"
            :end.sync="form.endTime"
          />
        </el-form-item>
      </template>
      <template slot="tableSearchHeader">
        <div class="panel-header">
          <span>{{ $route.meta.title }}列表</span>
          <a
            class="instructionsPDF"
            href="https://www.taxiaides.com/insurance/index.html"
            >(点击跳转场地责任险说明)</a
          >
        </div>
      </template>
    </TableSearch>
    <InsuranceUpload
      :visible.sync="viewInsuranceUploadVisible"
      :insuranceId="insuranceId"
      :_type="type"
      @refresh="refresh"
    >
    </InsuranceUpload>
    <InsuranceSetAdd :visible.sync="addDlgVisible" @refresh="refresh">
    </InsuranceSetAdd>
  </div>
</template>
<script>
import TableSearch from '@/components/TableSearch'
import { insuranceList } from '@/api/Insurance'
import InsuranceUpload from './components/InsuranceUpload'
import InsuranceSetAdd from './components/InsuranceSetAdd'
import http from '@/utils/http'

const schemeType = {
  PORT: '按照端口投保',
  STATION: '按照电站投保',
}

const status = {
  DELETED: '已删除',
  SUCCESS: '已完成',
  UN_DOWNLOAD_DEFAULT: '未下载原始投保单',
  UN_UPLOAD_SEAL: '未上传盖章投保单',
  UN_DOWNLOAD_SEAL: '未下载盖章投保单',
  UN_UPLOAD: '未上传保单',
  UPLOAD_Exit_INSURANC: '上传退保批文',
}

export default {
  name: 'InsuranceSetList',
  components: { TableSearch, InsuranceUpload, InsuranceSetAdd },
  data() {
    return {
      insuranceId: -1,
      type: '',
      form: {},
      visible: false,
      addDlgVisible: false,
      loading: false,
      tableData: {},
      viewInsuranceUploadVisible: false,
      columns: [
        {
          label: '编号',
          prop: 'id',
          resourceId: '/web/station-insurance/manager/编号',
        },
        {
          label: '所属代理商',
          prop: 'merchName',
          resourceId: '/web/station-insurance/manager/代理商',
        },
        {
          label: '保险公司',
          prop: 'insuranceName',
          resourceId: '/web/station-insurance/manager/保险公司',
        },
        {
          label: '投保方案',
          prop: 'schemeType',
          resourceId: '/web/station-insurance/manager/投保方案',
          formatter: (item) => {
            return item.schemeType == 'PORT' ? '按照端口投保' : '按照电站投保'
          },
        },
        {
          label: '状态',
          prop: 'status',
          resourceId: '/web/station-insurance/manager/状态',
          formatter: (item) => {
            return item.status == 'SUCCESS'
              ? '已完成'
              : item.status == 'UN_DOWNLOAD_DEFAULT'
              ? '未下载原始投保单'
              : item.status == 'UN_UPLOAD_SEAL'
              ? '未上传盖章投保单'
              : item.status == 'UN_DOWNLOAD_SEAL'
              ? '未下载盖章投保单'
              : item.status == 'UN_UPLOAD'
              ? '未上传保单'
              : item.status == 'UPLOAD_Exit_INSURANC'
              ? '上传退保批文'
              : item.status == 'DELETED'
              ? '已删除'
              : '--'
          },
        },
        {
          label: '到期时间',
          prop: 'expirationTime',
          resourceId: '/web/station-insurance/manager/到期时间',
          formatter: (item) => {
            return item.expirationTime ? item.expirationTime : '--'
          },
        },
        {
          label: '操作',
          buttons: [
            {
              label: '下载原始投保单',
              class: 'table-button-green',
              size: 'small',
              resourceId: '/web/station-insurance/manager/下载原始投保单',
              click: (row) => {
                this.loading = true
                http
                  .request({
                    method: 'get',
                    url:
                      '/station-insurance/manager/originalInsurance?id=' +
                      row.id,
                    responseType: 'blob',
                  })
                  .then((res) => {
                    let reader = new FileReader()
                    reader.onload = function (e) {
                      let a = document.createElement('a')
                      a.download = '原始投保单.docx'
                      a.href = e.target.result
                      document.body.appendChild(a)
                      a.click()
                    }

                    reader.readAsDataURL(res)
                  })
                  .catch((err) => {
                    console.log(err)
                  })
                  .finally(() => {
                    this.loading = false
                    this.refreshTable()
                  })
              },
            },
            {
              label: '上传盖章投保单',
              class: 'table-button-green',
              size: 'small',
              resourceId: '/web/station-insurance/manager/上传盖章投保单',
              click: (item) => {
                this.viewInsuranceUploadVisible = true
                this.insuranceId = item.id
                this.type = 'UN_UPLOAD_SEAL'
              },
              ifRender: (item) => {
                return item.status == 'UN_UPLOAD_SEAL' // 未上传盖章投保单
              },
            },
            {
              label: '下载盖章投保单',
              class: 'table-button-green',
              size: 'small',
              resourceId: '/web/station-insurance/manager/下载盖章投保单',
              click: (item) => {
                this.loading = true
                http
                  .request({
                    method: 'post',
                    url: '/station-insurance/manager/downloadInsurance',
                    responseType: 'blob',
                    data: {
                      id: item.id,
                      status: 'UN_DOWNLOAD_SEAL',
                    },
                  })
                  .then((res) => {
                    let reader = new FileReader()
                    reader.onload = function (e) {
                      let a = document.createElement('a')
                      var path = item.path || ''
                      a.download = '盖章投保单.' + path.split('.')[1]
                      a.href = e.target.result
                      document.body.appendChild(a)
                      a.click()
                    }

                    reader.readAsDataURL(res)
                  })
                  .catch((err) => {
                    console.log(err)
                  })
                  .finally(() => {
                    this.loading = false
                    this.refreshTable()
                  })
              },
              ifRender: (item) => {
                // return item.status == 'UN_DOWNLOAD_SEAL' // 未下载盖章投保单
                return (
                  item.status == 'SUCCESS' ||
                  item.status == 'UN_DOWNLOAD_SEAL' ||
                  item.status == 'UN_UPLOAD' ||
                  item.status == 'UPLOAD_Exit_INSURANC'
                )
              },
            },
            {
              label: '上传保单',
              class: 'table-button-green',
              size: 'small',
              resourceId: '/web/station-insurance/manager/上传保单',
              click: (item) => {
                console.log(item)
                this.viewInsuranceUploadVisible = true
                this.insuranceId = item.id
                this.type = 'UN_UPLOAD'
              },
              ifRender: (item) => {
                return item.status == 'UN_UPLOAD' // 未上传保单
              },
            },
            {
              label: '下载保单',
              class: 'table-button-green',
              size: 'small',
              resourceId: '/web/station-insurance/manager/下载保单',
              click: (item) => {
                console.log(item)
                this.loading = true
                http
                  .request({
                    method: 'post',
                    url: '/station-insurance/manager/downloadInsurance',
                    responseType: 'blob',
                    data: {
                      id: item.id,
                      status: 'SUCCESS',
                    },
                  })
                  .then((res) => {
                    let reader = new FileReader()
                    reader.onload = function (e) {
                      let a = document.createElement('a')
                      var policyPath = item.policyPath || ''
                      a.download = '保单.' + policyPath.split('.')[1]
                      a.href = e.target.result
                      document.body.appendChild(a)
                      a.click()
                    }

                    reader.readAsDataURL(res)
                  })
                  .catch((err) => {
                    console.log(err)
                  })
                  .finally(() => {
                    this.loading = false
                    this.refreshTable()
                  })
              },
              ifRender: (item) => {
                return (
                  item.status == 'SUCCESS' ||
                  item.status == 'UPLOAD_Exit_INSURANC'
                ) // 未下载保单
              },
            },
            {
              label: '上传退保批文',
              class: 'table-button-green',
              size: 'small',
              resourceId: '/web/station-insurance/manager/上传退保批文',
              click: (item) => {
                console.log(item)
                this.viewInsuranceUploadVisible = true
                this.insuranceId = item.id
                this.type = 'SUCCESS'
              },
              ifRender: (item) => {
                return item.status == 'SUCCESS' // 已完成
              },
            },
            {
              label: '删除',
              class: 'table-button-green',
              size: 'small',
              resourceId: '/web/station-insurance/manager/删除',
              click: (item) => {
                this.$confirm(`确认删除，删除后不可恢复？`, '删除', {
                  center: true,
                  customClass: 'tip-dialog__wrapper',
                })
                  .then(() => {
                    http
                      .request({
                        method: 'get',
                        url: 'station-insurance/manager/del?id=' + item.id,
                      })
                      .then(() => {
                        this.$message({
                          message: '删除成功',
                          type: 'success',
                        })
                        this.refreshTable()
                      })
                      .catch((err) => {
                        console.log(err)
                      })
                      .finally(() => {
                        this.loading = false
                      })
                  })
                  .catch((err) => console.log(err))
              },
              ifRender: (item) => {
                return item.status == 'UPLOAD_Exit_INSURANC' // 上传退保批文
              },
            },
          ],
          resourceId: '/web/station-insurance/manager/操作',
        },
      ],
      tableBtns: [
        {
          label: '新增',
          click: this.handleAdd,
          icon: 'el-icon-plus',
          resourceId: '/web/user-management/staff-management/新增',
        },
      ],
      searchPath: '/web/station-insurance/manager/查询',
      formItemsInline: [
        {
          placeholder: '请输入编号',
          type: 'text',
          clearable: true,
          value: 'insuranceNum',
          resourceId: '/web/station-insurance/manager/编号',
        },
        {
          placeholder: '请输入代理商',
          type: 'text',
          clearable: true,
          value: 'merchName',
          resourceId: '/web/station-insurance/manager/代理商',
        },
        {
          slot: 'date',
        },
        {
          type: 'select',
          value: 'status',
          placeholder: '请选择状态',
          clearable: true,
          options: () => {
            return Object.keys(status).map((item) => {
              return {
                label: status[item],
                value: item,
              }
            })
          },
          resourceId: '/web/station-insurance/manager/状态',
        },
        {
          type: 'select',
          value: 'schemeType',
          placeholder: '请选择投保方案',
          clearable: true,
          options: () => {
            return Object.keys(schemeType).map((item) => {
              return {
                label: schemeType[item],
                value: item,
              }
            })
          },
          resourceId: '/web/station-insurance/manager/投保方案',
        },
      ],
    }
  },
  methods: {
    refreshTable() {
      this.$refs.tableSearch.refreshTable()
    },
    // 新增
    handleAdd() {
      this.addDlgVisible = true
    },
    handleTableData(params) {
      this.loading = true
      insuranceList(params)
        .then((res) => {
          console.log('insuranceList')
          console.log(res)
          this.tableData = {
            list: res.list,
            totalCount: res.totalAmount,
          }
        })
        .catch((err) => {
          console.log(err)
        })
        .finally(() => {
          this.loading = false
        })
    },
    reset() {
      this.form = {}
    },
    refresh() {
      console.log('refresh')
      this.$refs.tableSearch.refreshTable()
    },
  },
}
</script>
<style lang="scss">
.user-search-container {
  margin-bottom: 30px;
}

.instructionsPDF {
  color: red;
  margin-left: 20px;
}
.instructionsPDF:hover {
  color: red;
}

.instructionsPDF:link {
  color: red;
}

.instructionsPDF:visited {
  color: red;
}
</style>
